import React, {PureComponent} from 'react';
import HeadNavBar from 'Components/HeadNavBar';
import {
  List,
  Button,
  WingBlank,
  WhiteSpace,
  Modal,
  Tag
} from 'antd-mobile';
import {Control} from 'react-keeper';
import './index.less';

import Carousel from 'Components/Carousel';
import imageItem1 from 'Image/goodsDetail-1.png';
import imageItem2 from 'Image/goodsDetail-2.png';


const style = {
  height: 40,
  fontSize: 12
};

const carouseData = [
  {
    id: 1,
    name: '',
    thumb: imageItem1,
    href: ''
  },
  {
    id: 2,
    name: '',
    thumb: imageItem2,
    href: ''
  }
];

const Item = List.Item;
const Brief = Item.Brief;
export default class Index extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      showSpec: false
    };
  }

  bindLeftClick = () => {
    Control.go(-1); // 返回上一页
  };

  bindShowGoodsSpec = () => {
    this.setState({
      showSpec: true
    })
  };

  bindCloseGoodsSpec = () => {
    this.setState({
      showSpec: false
    })
  };

  bindExchange =()=>{
    Control.go('/address/select');
  };

  render() {
    return (
      <div style={{backgroundColor: '#fff'}}>

        <Modal
          className='spec-model'
          popup
          visible={this.state.showSpec}
          animationType="slide-up"
          closable={true}
          onClose={this.bindCloseGoodsSpec}
        >
          <List renderHeader={() => {
            return (
              <div>
                <div className='sku-info'>
                  <img src={imageItem1} alt="thumb"/>
                  <div className='sku-des'>
                    <div className='sku-money'><span className='credits'>360</span> 积分</div>
                    <div className='sku-stock'>库存充足</div>
                    <div className='sku-spec'>请选择规格分类</div>
                  </div>
                </div>
                <div className='clear'/>
              </div>
            );
          }}
          >
            <List.Item>
              <div className='sku-group-box'>
                <div className='sku-group'>
                  <div className='sku-group_title'>颜色</div>
                  <div className='sku-group_item'>
                    <img src={imageItem1} alt="thumb"/>
                    粉色
                  </div>
                  <div className='sku-group_item'>
                    <img src={imageItem1} alt="thumb"/>
                    白色
                  </div>
                  <div className='sku-group_item'>
                    <img src={imageItem1} alt="thumb"/>
                    黑色
                  </div>
                </div>
              </div>
            </List.Item>
            <List.Item>
              <div className='sku-group-box'>
                <div className='sku-group'>
                  <div className='sku-group_title'>版本</div>
                  <div className='sku-group_item'>
                    标准版
                  </div>
                  <div className='sku-group_item'>
                    升级版
                  </div>
                </div>
              </div>
            </List.Item>
            <List.Item><Button type="primary">兑换</Button></List.Item>
          </List>
        </Modal>

        {/*头部导航栏*/}
        <HeadNavBar
          style={style}
          title='商品详情'
          mode='light'
          icon='&#xe61a;'
          bindLeftClick={this.bindLeftClick}
        />
        <div style={{height: 40}}/>
        {/*轮播图*/}
        <Carousel
          data={carouseData}
          autoplay={false}
          infinite={false}
        />
        <List className="goods-detail-list">
          <Item multipleLine extra={<Tag>库存充足</Tag>}>
            <span className='name'>苹果手表</span>
            <Brief><span className='credits'>360</span> 积分</Brief>
          </Item>
          <List>
            <Item extra="规格分类" arrow="horizontal" onClick={this.bindShowGoodsSpec}>选择</Item>
          </List>
        </List>
        <List renderHeader={() => '商品介绍'} className="goods-des">
          <Item wrap>
            苦逼
            苦逼
            苦逼
            苦逼
          </Item>
        </List>
        <div className='footer-btn'>
          <WhiteSpace size="sm"/>
          <WingBlank size="sm"><Button type="primary" onClick={this.bindExchange}>兑换</Button></WingBlank>
          <WhiteSpace size="sm"/>
        </div>
      </div>
    );
  }
}